<template>
  <el-dialog
    :title="userId?'编辑管理员':'添加管理员 (初始密码：123456)'"
    :visible="show"
    width="600px"
    :before-close="close"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
    >
      <el-form-item
        label="用户手机"
        prop="phone"
      >
        <el-input
          placeholder="用户手机"
          v-model.trim="form.phone"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="用户名称"
        prop="userName"
      >
        <el-input
          placeholder="用户名称"
          v-model.trim="form.userName"
        ></el-input>
      </el-form-item>
      <!--      <el-form-item-->
      <!--        label="用户密码"-->
      <!--        prop="password"-->
      <!--      >-->
      <!--        <el-input-->
      <!--          v-model="form.password"-->
      <!--          placeholder="用户密码"-->
      <!--        ></el-input>-->
      <!--      </el-form-item>-->
      <el-form-item label="用户描述">
        <el-input
          v-model.trim="form.describeText"
          type="textarea"
          :rows="3"
          placeholder="请输入用户描述"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button
        size="small"
        @click="close"
      >关闭</el-button>
      <el-button
        @click="save"
        size="small"
        type="primary"
      >保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: 'AddStaff',
    props: {
      show: {
        type: Boolean,
        default: false
      },
      userId: {
        type: Number,
        default: 0
      }
    },
    async created () {
      if (this.userId) {
        const { data } = await this.$service.gzl.getUser(this.userId)
        this.form.userName = data.data.userName
        this.form.phone = data.data.phone
        this.form.describeText = data.data.describeText
      }
    },
    data () {
      return {
        form: {
          userName: '',
          // password: '',
          phone: '',
          describeText: ''
        },
        rules: {
          userName: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          // password: [
          //   { required: true, message: '请输入用户密码', trigger: 'blur' },
          //   { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
          // ],
          phone: [
            { required: true, message: '请输入手机', trigger: 'blur' },
            { pattern: this.$_util.regexp.mobilePhone, message: '手机格式不正确', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      close () {
        this.$emit('close')
      },
      validate (form = 'form') {
        return new Promise((resolve, reject) => {
          this.$refs[form].validate(valid => {
            if (valid) return resolve(true)
            reject(new Error('fail'))
          })
        })
      },
      async save () {
        await this.validate()
        if (this.userId) {
          await this.$service.gzl.editUser(this.userId, this.form)
          this.$message.success('编辑成功')
        } else {
          await this.$service.gzl.addUser(this.form)
          this.$message.success('添加成功')
        }
        this.$emit('success')
      }
    }
  }
</script>

<style scoped>

</style>
